<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-date"></i> 角色管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色添加</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" type="input"  ></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="des">
          <el-input  v-model="form.des" type="input"  ></el-input>
        </el-form-item>
           <el-form-item label="菜单类型" v-if="user.isAdmin != undefined && user.isAdmin != null && user.isAdmin == 1">
          <el-select v-model="form.mechanismId" placeholder="请选择类型">
           
              <span class="" v-for="(subItem,i) in mechanism" :key="i" :index="subItem.id" >
                 <el-option :label="subItem.name" :value="subItem.id" :key="subItem.id"></el-option>
              </span>
          </el-select>
        </el-form-item>
          
        <el-form-item>
          <el-button type="primary" @click="submit('form')">确认添加</el-button>

        </el-form-item>
      </el-form>



    </div>
  </div>
</template>

<script>
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  import { quillEditor } from 'vue-quill-editor';
  export default {
    data: function(){
      return {
        form: {
          code: '',
          name:'',
        },
        rules: {
          des: [
            { required: false, message: '请输入角色名称', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入角色描述', trigger: 'blur' }
          ]
        },
        user:{
          isAdmin:null
        },
        mechanism:null,
        content: '',
        editorOption: {
          placeholder: '开始编辑'
        },

      }
    },
    components: {
      quillEditor
    },
    computed:{

    },
    mounted :function(){

    },
    methods: {
      init(){
        this.form.name = '';
        this.form.des = '';
        const userMap = JSON.parse(sessionStorage.getItem("userMap"));
        this.user = userMap;
     
        if(this.user.isAdmin != null && this.user.isAdmin  == 1){
            this.getMechanism();
        }else{
          this.form.mechanismId = userMap.mechanismId
        }
      },
      getMechanism(){
        var that = this;
        
        this.HttpUtil.encryptGet(
          this,
          this.Global.URLPATH.MECHANISM_NOPAGE_QUERY,
          {
            token:sessionStorage.getItem("token")
          },
          function (data) {
            if(data.data != null && data.data != undefined){
              for(var i in data.data){
                  data.data[i].index = parseInt(i)+1;
              }
              that.mechanism = data.data;
             
            }
            
          },
          function (data) {//访问失败
            //that.$message.success(data.msg);
          });
      },
      onEditorChange({editor, html, text}) {
        this.content = html;
      },
      submit(formName) {
        this.add()
        //this.$message.success('提交成功！');
      },

      add() {
        let that = this
        //发送请求
        this.HttpUtil.encryptPost(
          this,
          this.Global.URLPATH.ROLE,
          this.form,
          function (data) {

            that.$message.success("添加成功");
          
            that.$router.push({path: '/role/index'})
            that.form =  {
              code: '',
              name:'',
            }
          },
          function (data) {//访问失败
            that.$message.success(data.msg);
          });
      }
    },
    watch:{
      $route(newValue, oldValue){
        if(newValue.path == "/role/add"){
          this.init();
        }
      }
    }
  }
</script>
<style scoped>
  .editor-btn{
    margin-top: 20px;
  }
</style>
